<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="./newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="./newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="./newcj/fonts/iconfont.css?v=2016070717">
    <script src="./newcj/js/jquery.min.js"></script>
    <script src="./newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="./newcj/js/dist/flexible/flexible.debug.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body ontouchstart>
<div class='fui-page-group'>
<div class='fui-page chatDetail-page'>
    <div class="chat-header flex">
        <i class="icon icon-toleft t-48"></i>
        <span class="shop-titlte t-30">商店</span>
        <span class="shop-online t-26"></span>
        <span class="into-shop">进店</span>
    </div>
    <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
        <div class="chat-content">
            <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
            <p class="chat-time"><span class="time">2017-11-12</span></p>

<!--            <div class="chat-text section-left flex">-->
<!--            <span class="char-img" style="background-image: url(./newcj/img/123.jpg)"></span>-->
<!--            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>你好</span>-->
<!--        </div>-->

<!--            <div class="chat-text section-right flex">-->
<!--            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>-->
<!--            <span class="char-img" style="background-image: url(./newcj/img/132.jpg)"></span>-->
<!--           </div>-->

        </div>
    </div>
    <div class="fix-send flex footer-bar">
        <i class="icon icon-emoji1 t-50"></i>
        <input class="send-input t-28" maxlength="200">
        <i class="icon icon-add t-50" style="color: #888;"></i>
        <span class="send-btn">发送</span>
    </div>
</div>
</div>

<script>
    // const ax = axios.get('http://tt.cc/api/index', {
    //     params: {
    //         fromid: 1,
    //         toid: 2,
    //     }
    // })
    // .then(function (response) {
    //     return response;
    // })
    // .catch(function (error) {
    //     console.log(error);
    // })
    //
    // ax.then(res=>{
    //     // console.log(res.data.fromid);
    //     //  return res.data.fromid;
    //     console.log(res.data);
    //
    //
    // });


    // 获取 服务器端的ID
    var fromid = 2; // 我的ID
    var toid = 1;  // 接收人的ID

    // 连接websocket服务器
    var ws = new WebSocket("ws://127.0.0.1:8282");

    // 接收服务器发送消息
    ws.onmessage = function (e) {
        console.log(e.data); // 打印服务器端传递来的数据

        // 接收到的json格式进行转换成对象
        var message = eval("("+e.data+")");
        // console.log(message);  获取到了后台的json数据

        switch (message.type) {
            case "init":
                var bild = '{"type":"bind","fromid":"'+fromid+'"}';
                // 向服务端发送绑定客户端请求
                ws.send(bild);
                return;
            case "text":
                // 展示左侧聊天信息
                $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                    '            <span class="char-img" style="background-image: url(./newcj/img/123.jpg)"></span>\n' +
                    '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+message.data+'</span>\n' +
                    '        </div>');
                return;
        }

    }

    // 点击发送按钮
    $(".send-btn").click(function () {
        // 获取input框输入内容
        var text = $(".send-input").val();

        // 由于发送的数据会很多，所以取消直接采用text文本传输
        var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';

        // 展示右侧聊天信息
        $(".chat-content").append('<div class="chat-text section-right flex">\n' +
            '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span>\n' +
            '            <span class="char-img" style="background-image: url(./newcj/img/132.jpg)"></span>\n' +
            '           </div>');

        // 客户端发送数据给服务端
        ws.send(message);

        // 清空input的内容
        $(".send-input").val("");
    });


</script>

</body>
</html>
